import { Editor } from "@bytemd/react";
import "bytemd/dist/index.css";
import style from "./writing.module.scss";
import locale from "bytemd/locales/zh_Hans.json";
import highlight from "@bytemd/plugin-highlight";
import "highlight.js/styles/vs2015.min.css";
import {
  Button,
  Drawer,
  Form,
  Input,
  Radio,
  Select,
  Space,
  Upload,
} from "antd";
import { Article } from "@/types/content/article";
import { deleteFileInf } from "@/utils/deleteFileInf";
import { PlusOutlined } from "@ant-design/icons";
import { useTagList } from "./hooks/useTagList";
import { useCategoryList } from "./hooks/useCategoryList";
import { useWriting } from "./hooks/useWriting";

const plugins = [highlight()];
export default function Writing() {
  const { tagsList } = useTagList();
  const { categoryList } = useCategoryList();
  const {
    ruleForm,
    fileList,
    form,
    open,
    setRuleForm,
    onSave,
    openPublish,
    imgAdd,
    onClose,
    saveOrEdit,
    uploadFileInf,
    setFileList,
    setOpen,
  } = useWriting();

  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传</div>
    </button>
  );
  return (
    <div className={style.writingPage}>
      <div className={`${style.titleBar} flex flex--b`}>
        <Input
          style={{ marginRight: "20px", flex: "1" }}
          value={ruleForm.title}
          onChange={(e) => {
            setRuleForm({
              ...ruleForm,
              title: e.currentTarget.value,
            });
          }}
          placeholder="请输入标题"
        />
        <Space wrap size={10}>
          <Button type="primary" danger onClick={onSave} shape="round">
            保存
          </Button>
          {ruleForm.status === "1" && (
            <Button
              type="primary"
              shape="round"
              onClick={openPublish}
            >
              发布
            </Button>
          )}
        </Space>
      </div>
      <div className={style.pageBody}>
        <Editor
          value={ruleForm.content || ""}
          plugins={plugins}
          placeholder="写点什么..."
          locale={locale}
          uploadImages={imgAdd}
          onChange={(v) => {
            setRuleForm({
              ...ruleForm,
              content: v,
            });
          }}
        />
      </div>

      <Drawer title="发布和保存" onClose={onClose} open={open}>
        <Form
          form={form}
          name="categoryOptionForm"
          size="middle"
          autoComplete="off"
          layout="vertical"
          initialValues={{
            isComment: "0",
            isTop: "1",
          }}
          onFinish={(form) => {
            saveOrEdit(form, true);
          }}
        >
          <Form.Item<Article.Row> name="isComment" label="可否评论">
            <Radio.Group
              size="middle"
              options={[
                { label: "是", value: "0" },
                { label: "否", value: "1" },
              ]}
            />
          </Form.Item>
          <Form.Item<Article.Row> name="isTop" label="是否置顶">
            <Radio.Group
              size="middle"
              options={[
                { label: "是", value: "0" },
                { label: "否", value: "1" },
              ]}
            />
          </Form.Item>
          <Form.Item<Article.Row> name="tags" label="标签">
            <Select
              placeholder="请选择类别"
              style={{ width: 180 }}
              allowClear
              size="middle"
              mode="multiple"
            >
              {tagsList.map((item) => (
                <Select.Option value={item.id} key={item.id}>
                  {item.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item<Article.Row> name="categoryId" label="分类">
            <Select
              placeholder="请选择类别"
              style={{ width: 180 }}
              allowClear
              size="middle"
            >
              {categoryList.map((item) => (
                <Select.Option value={item.id} key={item.id}>
                  {item.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item<Article.Row> name="summary" label="文章摘要">
            <Input.TextArea />
          </Form.Item>
          <Form.Item<Article.Row> label="缩略图">
            <Upload
              listType="picture-card"
              className="avatar-uploader"
              action="#"
              fileList={fileList}
              customRequest={(file) => uploadFileInf(file.file)}
              onRemove={async () => {
                const url =
                  fileList[0] && fileList[0].url ? fileList[0].url : "";
                if (url) {
                  deleteFileInf(url);
                }
                setFileList([]);
              }}
            >
              {fileList.length >= 1 ? null : uploadButton}
            </Upload>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" size="middle">
                发布
              </Button>
              <Button
                htmlType="button"
                size="middle"
                onClick={() => {
                  setOpen(false);
                }}
              >
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}
